<template>
  <div ref="container" class="x6-graph" />

</template>

<script lang="ts">
import {defineComponent} from "vue";
import { Graph } from '@antv/x6'
Graph.registerNode(
    'custom-rect',
    {
      inherit: 'rect',
      width: 200,
      height: 40,
      attrs: {
        body: {
          rx: 10, // 圆角矩形
          ry: 10,
          strokeWidth: 1,
          stroke: '#5755a1',
          fill: '#5755a1',
        },
        label: {
          textAnchor: 'left',
          refX: 20,
          fill: '#fff',
          fontSize: 18,
        },
      },
    },
    true,
)
export default defineComponent({
  name: "custom-node",
  mounted() {
    const graph = new Graph({
      container: (this.$refs.container) as HTMLElement,
      width: 800,
      height: 600,
      grid: true,
    })

    graph.addNode({
      x: 100,
      y: 60,
      shape: 'custom-rect',
      label: 'Custom Rect',
    })
  }

})
</script>

<style scoped>

</style>
